<!DOCTYPE html>
<html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>客户详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<style>

</style>
<style> .layui-form-label {
    /*width: auto !important;*/
    /*text-align: center !important;*/
}

/*.layui-input-block {*/
/*    margin-left: 300px !important;*/
/*}*/
</style>
<body>
<div class="panel panel-default operationeidt" >
    <div class="panel-heading title"></div>
    <div class="layui-container">
        <form class="layui-form" action="" lay-filter="info" style="width: 800px;margin-top: 30px">
            <input name="id" hidden/>
            <div class="layui-row">
                <div class="layui-form-item">
                    <label class="layui-form-label">公司名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="khname" class="layui-input" readonly>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <label class="layui-form-label">联系人</label>
                        <div class="layui-input-block">
                            <input type="text" name="lxr" class="layui-input" >
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <label class="layui-form-label">联系电话</label>
                        <div class="layui-input-block">
                            <input type="text" name="lxdh"  class="layui-input" >
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <label class="layui-form-label">其他电话</label>
                        <div class="layui-input-block">
                            <input type="text" name="qtdh" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-col-md6">
                        <label class="layui-form-label">去电次数</label>
                        <div class="layui-input-block">
                            <input type="text" name="qdcs"  class="layui-input"readonly>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">客户来源</label>
                        <div class="layui-input-block">
                            <select id="khlySCFeidt" name="khly"  lay-filter="select-type" lay-verify="required">
                                <option value="">请选择客户来源</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">意向度</label>
                        <div class="layui-input-block">
                            <select id="kujbSCFeidt" name="khjb"  lay-filter="select-type" lay-verify="required">
                                <option value="">请选择意向度</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>


            <div class="layui-row">
                <div class="layui-col-md6">
                    <label class="layui-form-label">入库时间</label>
                    <div class="layui-input-block">
                        <input type="datetime-local" name="rktime"  class="layui-input"readonly>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <label class="layui-form-label">最后跟进时间</label>
                    <div class="layui-input-block">
                        <input type="datetime-local" name="zhgjtime"  class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-row">
                <div class="layui-col-md6">
                    <label class="layui-form-label">下次联系时间</label>
                    <div class="layui-input-block">
                        <input type="datetime-local" name="xclxtime"  class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md6">
                    <label class="layui-form-label">流公海时间</label>
                    <div class="layui-input-block">
                        <input type="datetime-local" name="lrghtime" class="layui-input"readonly>
                    </div>
                </div>
            </div>

            <div class="layui-row">
                <div class="layui-col-md6">
                    <label class="layui-form-label">各部门所属销售</label>
                    <div class="layui-input-block">
                        <input type="text" name="ssxs"  class="layui-input"readonly>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <input type="text" name="bz" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否成交</label>
                <div class="layui-input-block">
                    <select name="iscj">
                        <option value="0">未成交</option>
                        <option value="1">已成交</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submiteidt" id="submit">保存</button>

                </div>
            </div>
        </form>

        <div class="layui-col-md6" style="width: 80%;margin-top: 30px">
            <ul class="layui-timeline" id="gjjlUl">
            </ul>
        </div>
        <button type="" class="layui-btn" id="addgjjl">写记录</button>
        <button type="" class="layui-btn" id="hjqthh">其他号码</button>
        <button type="" class="layui-btn" id="gjjllist">历史跟进记录</button>
    </div>
</div>
<div class="table_divqtkh" hidden >
    <table class="layui-table" id="showTableqtkh" lay-filter="showTable" ></table>
</div>
<script type="text/html" id="toolqtdh">
    <a class="layui-btn layui-btn-xs" lay-event="hujiaoqtdh" shiro:hasPermission="twdkh:wh" >呼叫</a>
</script>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/common.js"></script>
</body>
<script th:inline="javascript"> var wdkhIdVo =[[${wdkhId}]]  </script>
<script>
//获取token
var token = CoreUtil.getData("access_token");
//地址栏转义token中的#号
var tokenQuery = token.replace("#", "%23");
var tableIns1;
var table = layui.table;
var form = layui.form;
var layer = layui.layer;
var $ = jQuery = layui.jquery;
var laydate = layui.laydate;
var upload = layui.upload;
var qtdhdata;
var wdkhlxdh;
info();
var isycVo;
layui.use(['table', 'layer', 'laydate','upload'], function () {
    form.on('submit(submiteidt)', function(data){
        data.field.lxdh = data.field.lxdh == wdkhlxdh ? wdkhlxdh : data.field.lxdh;
        // data.field.qtdh = qtdhdata;
        CoreUtil.sendPut("/tWdkh/update",data.field,function (res) {
            if (res.code == 0) {
                layer.msg('保存成功！', {time: 2000}, function () {
                    info();
                });
            }
        });
        return false;
    });

    table.on('tool(showTable)',function (obj) {
        var data = obj.data;
        switch (obj.event) {
            case 'hujiaoqtdh': //呼叫
                data.hjType = '1';//呼叫其他号码
                data.lxdh = data.qtdh;
                data.id = wdkhIdVo;
                hujiao(data);
                break;
        }
    });
    var hujiao = function (data) {
        CoreUtil.sendPost("/tWdkh/outbound", data, function (res) {
            layer.msg(data.field.phoneWH, {time: 2000}, function () {
            });
        });
    }
    $('body').on('click','#gjjllist', function(){
        window.open("/index/tGjjl/"+wdkhIdVo);
    });
    $('body').on('click','#addgjjl', function(){
        layer.open({
            type: 2,
            title: '<i class=iconfont>&#xe7c7;</i> 写记录',
            area: ['80%', '70%'],
            content: ['/index/tGjjl/add/'+wdkhIdVo, 'yes'],
            skin: 'layui-layer-molv',
            btn: ['立即提交', '关闭'],
            btnAlign: 'c',
            shadeClose: true,
            shade: 0.8,
            yes: function(index, layero){
                var submit = layero.find('iframe').contents().find("#submit");// #subBtn为页面层提交按钮ID
                submit.click();// 触发提交监听
                info();
                layer.close(index);
                return false;
            }
        });
    });

    $('body').on('click','#hjqthh', function(){
        dataQtdh = new Array();;
        //其他电话
        var s = qtdhdata.split(";");
        for (var i = 0; i < s.length; i++) {
            var qd = {"qtdh": s[i]}
            dataQtdh.push(qd);
        }
        layer.open({
            type: 1,
            skin: 'layui-layer-molv',
            title: "其他电话",
            area: ['50%', '30%'],
            shade: 0,
            shadeClose: false,
            content: jQuery(".table_divqtkh"),
            btn: ['关闭'],
            yes: function (index) {
                layer.close(index);
            }
        });
        tableIns2 = table.render({
            elem: '#showTableqtkh'
            , cols: [
                [
                    //:客户名称、联系人、联系电话、所属销售、意向度、去电次数、跟进记录、最后跟进时间、下次联系时间、入库时间、客户来源、备注、流公海时间
                    // {type: 'checkbox', fixed: 'left'},
                    // {title: "序号",type: "numbers"},
                    {field: 'qtdh', title: '其他电话', sort: true,templet: function (item) {
                            if (item.qtdh.length == 11 && isycVo == 1) { //是否隐藏
                                return item.qtdh.replace(item.qtdh.substring(3, 7), "****");
                            } else if (item.qtdh.length > 11 && isycVo == 1) { //是否隐藏
                                return item.qtdh.replace(item.qtdh.substring(3, 9), "****");
                            } else {
                                return item.qtdh;
                            }
                        },align: 'center'},
                    {width: 120, toolbar: "#toolqtdh", title: '操作'}
                ]
            ]
            ,data: dataQtdh
        });
    });
});

function info() {
    CoreUtil.sendGet("/tWdkh/infoData/", null, function (res) {
        var code = res.code;
        var data = res.data;
        // 请选择客户来源、请选择意向度;
        if (code == 0) {
            //客户来源
            var khlySCFeidt = $("#khlySCFeidt");
            $.each(data.khly, function (index, item) {
                khlySCFeidt.append("<option value=" + item + ">" + item + "</option>");
            });
            //意向度
            var kujbSCFeidt = $("#kujbSCFeidt");
            $.each(data.hkjb, function (index, item) {
                if (!!item) {
                    kujbSCFeidt.append("<option value=" + item.id + ">" + item.value + "</option>");
                }
            });
            isycVo = data.isyc;
            form.render("select");
            infoData();
        }
    });
};

function infoData(){
    CoreUtil.sendPost("/tWdkh/infoDataById/"+wdkhIdVo, null, function (res) {
        var gjjl = res.data.gjjl;//跟进记录
        var data = res.data.wdkh;//客户详情
        qtdhdata = data.qtdh;
        wdkhlxdh = data.lxdh;
        var wLxdh = data.lxdh;
        if (data.lxdh.length == 11 && isycVo == 1) { //是否隐藏
            wLxdh = data.lxdh.replace(data.lxdh.substring(3, 7), "****");
        } else if (data.lxdh.length > 11 && isycVo == 1) { //是否隐藏
            wLxdh = data.lxdh.replace(data.lxdh.substring(3, 9), "****");
        }
        var wqtdh = data.qtdh;
        if (isycVo == 1) {
            wqtdh = '****';
        }
        //给表单赋值
        form.val("info", {
            gcmcA: data.khname,
            id: data.id,
            username: data.username,
            cjtime: data.cjtime,
            updatetime: data.updatetime,
            state: data.state,
            khname: data.khname,
            lxr: data.lxr,
            lxdh: wLxdh,
            qtdh: wqtdh,
            khly: data.khly,
            khjb: data.khjb,
            rktime: data.rktime,
            qdcs: data.qdcs,
            gjjl: data.gjjl,
            zhgjtime: data.zhgjtime,
            xclxtime: data.xclxtime,
            lrghtime: data.lrghtime,
            ssxs: data.ssxs,
            iscj: data.iscj,
            bz: data.bz
        });
        $("#gjjlUl").html("");
        var html = "";
        for (let i = 0; i < gjjl.length; i++) {
            var gjjldata = gjjl[i];
            html += "<li class=\"layui-timeline-item\">\n" +
                "                    <i class=\"layui-icon layui-timeline-axis\">&#xe63f;</i>\n" +
                "                    <div class=\"layui-timeline-content layui-text\">\n" +
                "                        <h3 class=\"layui-timeline-title\">"+ gjjldata.addtime +"</h3>\n" +
                "                        <div class=\"layui-row\">\n" +
                "                            <div class=\"layui-col-md4\">\n" +
                "                                <label class=\"layui-form-label\">销售 :</label>\n" +
                "                                <div class=\"layui-input-block\">\n" +
                "                                    <span>"+ gjjldata.xs +"</span>\n" +
                "                                </div>\n" +
                "                            </div>\n" +
                "                            <div class=\"layui-col-md4\">\n" +
                "                                <div class=\"layui-input-block\">\n" +
                "                                    <span>"+ gjjldata.xclxtime +"</span>\n" +
                "                                </div>\n" +
                "                            </div>\n" +
                "                            <div class=\"layui-col-md4\">\n" +
                "                                <div class=\"layui-input-block\">\n" +
                "                                    <span>"+ gjjldata.khjb +"</span>\n" +
                "                                </div>\n" +
                "                            </div>\n" +
                "                        </div>\n" +
                "                        <div class=\"layui-row\">\n" +
                "                            <div class=\"layui-col-md4\">\n" +
                "                                <label class=\"layui-form-label\">跟进情况 :</label>\n" +
                "                                <div class=\"layui-input-block\">\n" +
                "                                    <span>"+ gjjldata.gjqk +"</span>\n" +
                "                                </div>\n" +
                "                            </div>\n" +
                "                        </div>\n" +
                "\n" +
                "                    </div>\n" +
                "                </li>";
        }
        $("#gjjlUl").html(html);

    });
}

</script>
</html>